#{extends 'main.html' /}
#{set title:'Play Tic Tac Toe' /}
        <table id="gameBoard">
            <tr class="row">
                <td class="box" id="box0">&nbsp;</td>
                <td class="box" id="box1">&nbsp;</td>
                <td class="box" id="box2">&nbsp;</td>
            </tr>
            <tr class="row">
                <td class="box" id="box3">&nbsp;</td>
                <td class="box" id="box4">&nbsp;</td>
                <td class="box" id="box5">&nbsp;</td>
            </tr>
            <tr class="row">
                <td class="box" id="box6">&nbsp;</td>
                <td class="box" id="box7">&nbsp;</td>
                <td class="box" id="box8">&nbsp;</td>
            </tr>
        </table>
        <div><a id="showStatus" href="#">GetStatus</a></div>
        <div><a id="startNew" href="#">New Game</a></div>
        <div id="status"></div>
        <script type="text/javascript" charset="utf-8">
            $(".box").click(function (){
                var boxId = $(this).attr('id');
                $.post( '@{playerMove()}', {playerMove: boxId.substr(boxId.length - 1)}  ,function(data) {
                    drawBoardStatus(data);
                } )
            });

            $('#showStatus').click(function() {
                $.get( '@{showStatus()}', function(data) {
                    var s="";
                    for(i=0; i<data.length;i++) {
                        s += "<p>Box " + i + " = " + data[i] + "</p>";
                    }
                    document.getElementById("status").innerHTML=s;
                })
            });

            $('#startNew').click(function() {
                $.get( '@{startNewGame()}', function(data) {
                    drawBoardStatus(data);
                })
            });

        </script>